<template>
  <div class="zuida">
    <!-- <Tou></Tou> -->
    <div class="lunbo">
      <el-carousel :interval="4000" type="card" height="600px">
    <el-carousel-item v-for="(item,index) in img" :key="index">
      <img :src="item.img" alt="" @click="dianji(index)">
    </el-carousel-item>
  </el-carousel>
    </div>
    <div class="fenlei">
      <div class="diyi">
        <div class="tu">
          <img src="../img/face.jpeg" alt="">
        </div>
        <div class="zi">文章发布</div>

      </div>
      <div class="dier">
        <div class="tu">
          <img src="../img/face.jpeg" alt="">
        </div>
        <div class="zi">文章发布</div>
      </div>
      <div class="disan">
        <div class="tu">
          <img src="../img/face.jpeg" alt="">
        </div>
        <div class="zi">文章发布</div>
      </div>
      <div class="disi">
        <div class="tu">
          <img src="../img/face.jpeg" alt="">
        </div>
        <div class="zi">文章发布</div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
// import Tou from './zujian/shang.vue'
export default {
  components:{
    // Tou
  },
  methods:{
    dianji(index){//传参以找到相关信息
      console.log(index);
    }
  },
  data(){
    return{
      index:'1',
      img:[
        
      ]
    }
    
  },
  created(){
    // this.$emit('index',this.index)
    this.$store.commit('indexbian',this.index)
    this.$store.commit('bianhui')
    this.axios.get('/').then((res)=>{
      // console.log(res.data);
      this.img=res.data
    })
    //每日文章数据统计
    var date=new Date()
      var yue=date.getMonth()+1
      var ri=date.getDate()
      // this.riqi=[yue+'月'+(ri-6)+"日",yue+'月'+(ri-5)+"日",yue+'月'+(ri-4)+"日",yue+'月'+(ri-3)+"日",yue+'月'+(ri-2)+"日",yue+'月'+(ri-1)+"日",yue+'月'+ri+"日"]
      var user=JSON.parse(sessionStorage.getItem('user'))
      // console.log(user);
      if(user!==null){
         var id=user.id
    this.axios.post('/sum',{
        idd:id,
        date:[yue+'/'+(ri-6),yue+'/'+(ri-5),yue+'/'+(ri-4),yue+'/'+(ri-3),yue+'/'+(ri-2),yue+'/'+(ri-1),yue+'/'+ri]
      }).then((res)=>{
        this.$store.commit('shubian',res.data)
        
      })
      }
   
  }
}
</script>
<style lang="less" scoped>
  //   .el-carousel__item h3 {
  //   color: #475669;
  //   font-size: 14px;
  //   opacity: 0.75;
  //   line-height: 200px;
  //   margin: 0;
  // }
  
  // .el-carousel__item:nth-child(2n) {
  //   background-color: #99a9bf;
  // }
  
  // .el-carousel__item:nth-child(2n+1) {
  //   background-color: #d3dce6;
  // }
  .lunbo{
    img{
      width: 100%;
    }
  }
  .fenlei{
    display: flex;
    width: 100%;
    justify-content: space-around;
    // height: 300px;
    // background-color: red;
    .diyi,.dier,.disan,.disi{
      display: flex;
      flex-direction: column;
      width: 20%;
      height: 370px;
      justify-content: space-around;
      
      // background-color: aqua;
      .tu{
      border-radius: 80px;
      overflow: hidden;
      width: 100%;
      // height: 200px;
      height: 300px;
      img{
        width: 100%;
      }
    }
    }
    
  }
  .zi{
    width: 100%;
    height: 60px;
    background-color: #6ed792;
    font-size: 20px;
    text-align: center;
    line-height: 60px;
    border-radius: 20px;
    box-shadow: 1px 1px 10px #41cf53;
    color: white;
  }
</style>